<template>
	<view class="mall">
		<gyd-navbar back-color="#fff" :title="title" :isBack="false"></gyd-navbar>

		<nav-bg-cover url="/static/images/bg-cover-mall.png">
			<view class="cover-integral">
				<!-- <view class="value">{{points}}</view>
				<view class="label">
					当前积分
					<uni-icons type="right" size="18"></uni-icons>
				</view> -->
			</view>
		</nav-bg-cover>

		<view class="content">
			<view class="goods-category">
				<view :class="params.category_id == item.id ?'item active':'item' " v-for="(item,index) in categoryList"
					:key="index" @click="changeTab(item.id) "> {{item.name}} </view>
			</view>

			<view class="goods-list">
				<view class="goods-item" v-for="(item,index) in goodsList" :key="index"
					@click="pageRoute('/merchantPages/mall/good-detail?id='+item.id)">
					<view class="img-box">
						<image :src="item.logo" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="name">{{item.name}}</view>
						<view v-if="item.buy_type==1">
							<view class="count">{{item.sale_points}}<text class="unit">积分</text></view>
						</view>
						<view v-if="item.buy_type==2">
							<view class="count">￥{{item.sale_price}}</view>
						</view>
						<view v-if="item.buy_type==3">
							<view class="count">{{item.sale_points}}<text class="unit">积分</text></view>
							<view class="count">￥{{item.sale_price}}</view>
						</view>
						<view>
							<u-button type="primary" size="mini" v-if="item.buy_type==2"
								@click="pageRoute('/merchantPages/mall/good-detail?id='+item.id)">立即购买</u-button>
							<u-button type="primary" size="mini" v-else
								@click="pageRoute('/merchantPages/mall/good-detail?id='+item.id)">立即兑换</u-button>
						</view>
					</view>
				</view>
				<view class="empty-data" v-if="goodsList.length===0">暂无商品</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<gyd-tabbar :current="2"></gyd-tabbar>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '商城',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		points: 0,
		categoryList: [],
		isMore: true,
		goodsList: [],
		params: {
			category_id: '0',
			user_type: 0,
		}
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getCategoryList();
		getGoodsList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
		state.goodsList = [];
		getGoodsList();
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		getGoodsList();
	})

	function getCategoryList() {
		request.get('points.mall/categoryList', {
			user_type: state.params.user_type
		}).then(res => {
			console.log('积分商品分类');
			state.categoryList = res.data;
			state.categoryList.unshift({
				id: 0,
				name: '全部'
			})
		})
	}

	function getGoodsList() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return;
		}
		state.params.skip = state.goodsList.length;
		request.get('points.mall/goodsList', state.params).then(res => {
			console.log('积分商品');
			state.isMore = res.data.is_more;
			if (state.goodsList.length == 0) {
				state.goodsList = res.data.goodsList;
			} else {
				state.goodsList = state.goodsList.concat(res.data.goodsList);
			}
		})
	}

	function changeTab(id) {
		console.log('选择分类', id);
		state.params.category_id = id;
		state.isMore = true;
		state.goodsList = [];
		getGoodsList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		points,
		categoryList,
		isMore,
		goodsList,
		params,
	} = toRefs(state);
</script>

<style lang="scss">
	.mall {
		.cover-integral {
			padding: $m24;

			.label {
				@include f-center($block: inline-flex);
				font-size: $font-24;
			}

			.value {
				font-size: $font-48;
				color: $primary-color;
				font-weight: bold;
			}
		}

		.content {
			display: flex;
			flex-direction: row;
			height: 82vh;

			.goods-category {
				width: 160rpx;

				background: #fff;

				.item {
					line-height: 80rpx;
					padding: 0 0 0 $m24;
					font-size: $font-30;
					color: $main-color;

					&.active {
						background: $primary-color;
						color: #fff;
					}
				}
			}

			.goods-list {
				flex: 1;
				overflow: hidden;

				padding: 0 $m24 $m24;

				.goods-item {
					display: flex;
					align-items: center;
					margin-bottom: $m24;
					background: #fff;
					border-radius: 10rpx;

					.img-box {
						width: 180rpx;
						height: 180rpx;
						margin: 0 $m24 0 0;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.info {
						flex: 1;

						.name {
							@include ellipsis;
							height: 48rpx;
							line-height: 48rpx;
							font-size: 30rpx;
							color: $main-color;
							font-weight: 500;
						}

						.count {
							margin-top: $m12;
							color: $primary-color;
							font-size: $font-36;
							font-weight: 600;

							.unit {
								font-size: 22rpx;
								color: $tips-color;
							}
						}
					}
				}

				.empty-data {
					margin-bottom: $m24;
					padding: $m24;
					background-color: #fff;
					border-radius: $radius-16;
					text-align: center;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>